import React, { useState, useCallback } from 'react'
import { Text, View } from '@tarojs/components'
import i18n from '@I18N'
import useInterval from '@HOOKS/useInterval'

import './index.scss'

const EMPTY_FUNC = () => {}

const Countdown = ({
  until = 60, onFinish = EMPTY_FUNC,
}) => {
  const [count, setCount] = useState(Math.max(until, 0))
  const countdown = useCallback(() => {
    if (count > 0) {
      setCount(count - 1)
    } else {
      onFinish()
    }
  }, [count, setCount, onFinish])
  useInterval(countdown, 1000)

  return (
    <View className="countdown">
      <Text className="count">
        {`${i18n.login.reacquire()}(${count})`}
      </Text>
    </View>
  )
}

export default Countdown
